<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="row"><div class="col-md-3 col-md-offset-2 alert alert-danger page-alert" v-show="isShowError" role="alert">{{errorMsg}}</div></div>
    <section class="content-header">
      <h1>
        设备详细
        <small>设备概览、设备数据</small>
      </h1>
    </section>
  
    <!-- Main content -->
    <section class="content container-fluid">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">设备数据交互实验</h3>
            </div>
  
            <div class="box-body">
              <textarea class="form-control" rows="13" placeholder="数据交互显示区" readonly="readonly" v-model="sndHistory"></textarea>
              <!-- /input-group -->
            </div>
            <div class="box-footer">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="发送数据" v-model="sndBuffer">
                <span class="input-group-addon">
                  <label>
                    <input type="checkbox" aria-label="立即发送" v-model="sndSoon"> 立即发送
                  </label>
                </span>
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default" @click="sndData">发送</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</template>

<script>
import axios from 'axios';

export default {
  name: 'DeviceDetail',
  data: function() {
    return {
      sndBuffer: '',
      sndHistory: '',
      sndSoon: false,
      isShowError: false,
      errorMsg: '',
      devdbid: NaN,
    }
  },
  created() {
    this.devdbid = parseInt(this.$route.params.devid);
    if(isNaN(this.devdbid)) {
      showError("未知设备！");

    }
  },
  methods: {
    showError(msg) {
      this.isShowError = true;
      this.errorMsg = msg;
      let _this = this;
      setTimeout(() => {
        _this.isShowError = false;
        _this.errorMsg = '';
      }, 1000);
    },
    sndData() {
      if(!!!this.sndBuffer) {
        return;
      }
      let args = {
        devdbid: this.devdbid,
        data: this.sndBuffer,
        soon: this.sndSoon.toString(),
      };
      let req = new Promise((resolve, reject) => {
        axios.post("/pushmessages/", args).then(response => {
          resolve(response);
        }).catch(err => {
          console.error('error occured.');
          console.log(err);
          reject(err);
        });
      });
      req.then(rsp => {
        this.sndHistory += this.sndBuffer + "\n";
        this.sndBuffer = '';
      }).catch(err => {
        showError("发送时发生错误", err.data.msg);
      });
    },
  }
}
</script>

<<style>
div.page-alert {
  position: fixed;
  z-index: 999;
}
</style>
